"use client"; // 确保这是客户端组件

import React, { useState, useEffect, Suspense, useCallback } from 'react';
import { useSearchParams, useRouter } from 'next/navigation'; // 添加 useRouter
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { newProject, save_new_Project, ProjectData } from '../services/api'; // 导入 API 函数 和 ProjectData 接口
import LoadingOverlay from '../components/LoadingOverlay'; // 导入加载组件

// --- 辅助组件处理 Suspense 和客户端逻辑 ---
function NewProjectContent() {
    const searchParams = useSearchParams();
    const router = useRouter(); // 获取 router 实例

    // --- 状态管理 ---
    const [projectName, setProjectName] = useState('project'); // 默认项目名
    const [pageState, setPageState] = useState<'input' | 'generating' | 'display'>('input'); // 页面状态
    const [markdownContent, setMarkdownContent] = useState<string>(''); // Markdown 内容 (md)
    const [codeContent, setCodeContent] = useState<string>(''); // 代码内容 (code)
    const [answerContent, setAnswerContent] = useState<string>(''); // 答案内容 (answer)
    const [isLoading, setIsLoading] = useState<boolean>(false); // 加载状态
    const [loadingMessage, setLoadingMessage] = useState<string>(''); // 加载信息
    const [error, setError] = useState<string | null>(null); // 错误信息

    // --- 从 URL 获取参数 ---
    // 使用 useCallback 确保这些值在依赖项数组中稳定
    const userId = useCallback(() => searchParams.get('userId'), [searchParams])();
    const plan = useCallback(() => searchParams.get('plan'), [searchParams])();
    const intro = useCallback(() => searchParams.get('intro'), [searchParams])();
    const lang = useCallback(() => searchParams.get('lang'), [searchParams])();
    const direction = useCallback(() => searchParams.get('direction'), [searchParams])();
    const stepStr = useCallback(() => searchParams.get('step'), [searchParams])();
    const step = stepStr ? parseInt(stepStr, 10) : null; // 将 step 转换为数字

    // --- 检查必要参数 ---
    useEffect(() => {
        if (!userId || !plan || !intro || !lang || !direction || step === null || isNaN(step)) {
            setError('缺少必要的参数，无法继续。请确保 URL 包含 userId, plan, intro, lang, direction, 和 step。');
            // 可以选择重定向或显示更友好的错误页面
        }
    }, [userId, plan, intro, lang, direction, step]);

    // --- 处理函数 ---
    const handleGenerateProject = useCallback(async (currentProjectName: string) => {
        if (!userId || !lang || !direction || step === null || isNaN(step)) {
            setError('缺少必要的参数，无法生成项目。');
            return;
        }
        setError(null); // 清除旧错误
        setIsLoading(true);
        setLoadingMessage('生成中... 大约需要1-3分钟');
        setPageState('generating'); // 进入生成状态

        try {
            // newProject 现在返回 ProjectData
            const result: ProjectData = await newProject(userId, lang, direction, step, currentProjectName); // 使用 currentProjectName
            // 从 result 中获取数据并更新状态
            setProjectName(result.name); // 使用后端返回/确认的名称
            setCodeContent(result.code);
            setMarkdownContent(result.md); // 使用 result.md
            setAnswerContent(result.answer);
            setPageState('display'); // 进入显示状态
        } catch (err: any) {
            console.error("生成项目失败:", err);
            setError(err.message || '生成项目时发生未知错误');
            setPageState('input'); // 出错则退回输入状态
        } finally {
            setIsLoading(false);
        }
    }, [userId, lang, direction, step]); // 依赖项

    const handleConfirmInput = () => {
        const nameToUse = projectName.trim() === '' ? 'project' : projectName.trim();
        handleGenerateProject(nameToUse);
    };

    const handleRegenerate = () => {
        // 直接使用当前确认的项目名称重新生成
        handleGenerateProject(projectName);
    };

    const handleSave = async () => {
        // 检查所有需要保存的数据是否存在
        if (!userId || !lang || !direction || step === null || isNaN(step) || !projectName || !codeContent || !markdownContent || !answerContent) {
            setError('缺少必要的信息，无法保存项目。');
            return;
        }
        setError(null);
        setIsLoading(true);
        setLoadingMessage('保存中...');

        try {
            // 构造 projectData 对象
            const projectData: ProjectData = {
                name: projectName,
                code: codeContent,
                md: markdownContent,
                answer: answerContent
            };
            // 调用更新后的 saveProject
            await save_new_Project(userId, lang, direction, step, projectData);
            // 跳转回主界面，并携带 userId
            if (userId) { // 确保 userId 存在
                router.push(`/choose?userId=${userId}`);
            } else {
                // 如果 userId 不存在，可以跳转到登录页或显示错误
                console.error("无法获取 userId，无法跳转。");
                setError("无法获取 userId，无法完成跳转。请重新登录或检查 URL。");
                // 或者跳转到根目录但不带 userId
                // router.push('/');
            }
        } catch (err: any) {
            console.error("保存项目失败:", err);
            setError(err.message || '保存项目时发生未知错误');
        } finally {
            setIsLoading(false);
        }
    };


    // --- 渲染逻辑 ---
    return (
        <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 relative p-4">
            {isLoading && <LoadingOverlay message={loadingMessage} />}

            {/* 主要内容容器 */}
            <div className="bg-white dark:bg-gray-800 p-6 sm:p-8 rounded-lg shadow-lg w-full max-w-3xl"> {/* 响应式内边距和最大宽度 */}
                {/* 错误显示区域 */}
                {error && !isLoading && ( // 不在加载时显示错误
                     <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
                         <strong className="font-bold">错误!</strong>
                         <span className="block sm:inline"> {error}</span>
                     </div>
                )}

                {/* 阶段一：输入项目名称 */}
                {pageState === 'input' && !error && ( // 没有错误才显示输入框
                    <div className="flex flex-col items-center">
                        <h1 className="text-xl font-bold text-center mb-6 dark:text-white">创建新项目</h1>
                        <label htmlFor="projectName" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            项目名称
                        </label>
                        <input
                            type="text"
                            id="projectName"
                            value={projectName}
                            onChange={(e) => setProjectName(e.target.value)}
                            placeholder="默认为 project"
                            className="w-full max-w-sm px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-gray-300 mb-6"
                        />
                        <button
                            onClick={handleConfirmInput}
                            className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                        >
                            确定
                        </button>
                    </div>
                )}

                 {/* 阶段二：显示 Markdown */}
                {pageState === 'display' && (
                    <div className="flex flex-col h-[80vh]"> {/* 限制高度以便内部滚动 */}
                        {/* 左上角项目名称 */}
                        <h2 className="text-lg font-semibold mb-4 dark:text-white">{projectName}</h2>

                        {/* 中间 Markdown 显示区域 (带滚动条) */}
                        <div className="flex-grow border border-gray-300 dark:border-gray-600 rounded-md overflow-y-auto p-4 bg-gray-50 dark:bg-gray-700 mb-4 prose dark:prose-invert max-w-none">
                             {/* prose dark:prose-invert 用于基本的 Markdown 样式 */}
                             {/* max-w-none 覆盖 prose 的宽度限制 */}
                            <ReactMarkdown remarkPlugins={[remarkGfm]}>{markdownContent}</ReactMarkdown>
                        </div>

                        {/* 左下角和右下角按钮 */}
                        <div className="flex justify-between mt-auto"> {/* mt-auto 将按钮推到底部 */}
                            <button
                                onClick={handleRegenerate}
                                className="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
                            >
                                重新生成
                            </button>
                            <button
                                onClick={handleSave}
                                className="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
                            >
                                保存
                            </button>
                        </div>
                    </div>
                 )}

                 {/* 可以在 generating 状态显示一些东西，如果 LoadingOverlay 不够 */}
                 {pageState === 'generating' && !isLoading && (
                    <div className="text-center dark:text-white">处理中...</div>
                 )}
            </div>
        </div>
    );
}


// --- 默认导出，使用 Suspense 包裹 ---
export default function NewProjPage() {
  return (
    <Suspense fallback={<LoadingOverlay message="加载页面参数..." />}>
       <NewProjectContent />
    </Suspense>
  );
}